بازدید امروز : 6
بازدید دیروز : 29
کل بازدید : 12140
کل یادداشتها ها : 11
------------------------------------------------------
اهداف این جلسه :
این درس یکی از کاربردی ترین درس های HTML می باشد و درعین حال بسیار هم ساده است.
برای اینکه بتوانیم بین صفحات پیوند ایجاد کنیم از تگ <a> استفاده می کنیم.در این تگ یک مشخصه بنام href وجود دارد که ضروری می باشد.همچنین مشخصه ی target نیز وجود دارد که هرچند ضروری نیست ولی مفید می باشد. با یک مثال درک موضوع را ساده تر می کنیم:
رمثال بالا نوشته ی “عصر علم” درصفحه با رنگ آبی و خط زیر آن نمایش داده می شود و کاربر با کلیک بر روی آن به آدرس تعیین شده در مشخصه ی href هدایت می شود. مشخصه ی target هم نحوه ی باز شدن صفحه ی جدید را تعیین می کند و مقدار blank_ نشان می دهد که آدرس دریک صفحه ی جدید نمایش داده خواهد شد در صورتی که اگر این مشخصه را از تگ بالا حذف کنیم آدرس در همان صفحه ی فعلی که در آن حضور داریم بارگزاری می شود.
سایر مقادیر قابل قول برای مشخصه target عبارتند از:
self ، _parent_ و top_ که می توانید با بکارگیری آنها تفاوت میان آنها را فرا گیرید.
تمرین 1-6 : یک صفحه وب بسازید و در آن یک لینک به صفحه سایت گوگل با آدرس google.com ایجاد کنید .
در کل دو نوع آدرس دهی وجود دارد:
در آدرس دهی مطلق آدرس باید به طور کامل ذکر شود به عنوان مثال :
توجه داشته باشید که در آدرس دهی مطلق حتما باید نوع پروتکل صفحات ذکر شود یعنی برای صفحات وب معمولی باید http:// و برای صفحات وب امنیتی https:// در آدرس گفته شود .
ولی اگر فایل ها و یا صفحات شما در یک پوشه و یا یک جا قرار دارند بهتر است از آدرس دهی نسبی استفاده کنید . در آدرس دهی نسبی ، مکان قرارگیری فایلها و صفحات به نسبت صفحه مبدا تعیین میشوند . به عنوان مثال ، تصور کنید که صفحه ی وب شما در پوشه ی A قرار دارد و درون پوشه ی A پوشه ی دیگری به نام image قرار دارد. حال شما می خواهید در صفحه ی خود ( که در فولدر A است ) آدرس تصویر 1.jpg که در پوشه ی image قرار دارد را قرار دهید و به عبارتی به آن تصویر لینک بدهید ، نتیجه به صورت زیر خواهد بود :
کد بالا رو در صفحه page.html تایپ کنید و نتیجه رو مشاهده کنید .
کد ” /.. ” به مرورگر می گوید یک پوشه به عقب برگرد و سپس پوشه ی image را جستجو کن و تصویر 2.jpg را درون آن بیاب!
تفسیر کد بالا اینطور خواهد بود :
از اونجایی که صفحه page.html که صفحه مبدا ما حساب میشه درون فولدر myfolder قرار داره ، اگر یک گام به عقب برگردیم ( یعنی ” /.. ” ) ، از پوشه myfolder خارج خواهیم شد و وارد پوشه ی A میشیم . بعد از وارد شدن به پوشه A میتونیم وارد پوشه image بشیم ( image/ ) و درون فولدر image تصویر 2.jpg رو پیدا میکنیم . کمی پیچیده است ولی امیدوارم آدرس دهی نسبی رو متوجه شده باشید !
* در آدرس دهی نسبی ، صفحه مبدا همون صفحه ایست که کد رو داریم درون اون مینویسیم .
تمرین 2-6 :
در دسکتاپ کامپیوتر خود یک فولدر به نام html ایجاد کنید . درون این فولدر نیز دو فولدر به نام های A و B ایجاد کنید و درون فولدر B یک فولدر به نام image بسازید و یک تصویر دلخواه درون فولدر image قرار دهید و نام آن را ax.jpg قرار دهید. حال در فولدر A یک صفحه با نام index.html ایجاد کنید که لینک تصویر ax.jpg را با نام ” تصویر دلخواه من ” شامل شود.
می توان بین بخش های یک صفحه با استفاده از نماد # و مشخصه ی id پیوند برقرار کرد.نحوه ی کار به این صورت است که به عنوان مثال شما در بالای صفحه ی خود لیستی دارید و هرکدام از موارد لیست در ادامه ی صفحه توضیح داده شده اند و شما قصد دارید که کاربر بتواند با کلیک بر روی هر کدام از موارد لیست توضیحات مربوطه را مشاهده کند. به مثال زیر توجه کنید :
تگ بالا لینکی را با نام ” مورد اول ” ایجاد می کند . به آدرس آن توجه کنید.برای اینکه مرورگر بتواند این آدرس را بیابد در تگ مقصد از مشخصه ی id استفاده می کنیم :
حال اگر تگ بالا را قبل از شروع بخش توضیحات مورد اول قرار دهید کاربر با کلیک بر روی لینک ” مورد اول ” به بخش توضیحات آن فرستاده می شود.
این روش بین چندین صفحه هم کاربرد دارد.مثلا ممکن است بخش توضیحات مورد اول در صفحه ی دیگری باشد آنگاه آدرس آن بدین صورت تغییر خواهد کرد:
برای اینکه با مخاطبین خود در ارتباط باشید می توانید آدرس پست الکترونیک خود را به صورت پیوند و یا همان لینک در سایت و یا صفحه ی خود نمایش دهید. همه چیز مانند پیوند بین صفحات می باشد و فقط یک تفاوت وجود دارد، به مثال زیر توجه کنید :
با کلیک بر روی لینک بالا برنامه ی متناسب با ارسال ایمیل در سیستم کاربر گشوده می شود ( به طور معمول Outlook است) و به کاربر اجازه می دهد که ایمیلی را به پست الکترونیک شما ارسال نماید. به نحوه ی آدرس دهی برای پست الکترونیک دقت کنید.دراینجا پیام ها به آدرس info @ AsreElm.com ارسال خواهند شد.
جواب ها:
کانال...